<template>
    <div class="rotor">
      <div style="width:100%; height:2rem"></div>
        <div id="rotary-table">
          <div class="award" v-for="(award,index) in awards" :key="award.id" :class="['award'+index,{'active': index==current}]">
            <!-- {{award.name}} -->
             <img v-lazy="award.src" alt :class="['award'+index,{'active': index==current}]">
          </div>
          <div id="start-btn" @click="start">开始</div>
        </div>

         <div class="return" @click="ret">
            <img src="http://assets.rurushishi.com/activies/bgyAct/return.png" alt="">
        </div>

        <div class="writeinfo" v-show="prizeInfo.flag">
          <div class="writeinfo_warp">
            <div class="writeinfo_prizeinfo">
              恭喜您获得“{{prize}}”
            </div>
            <div class="writeinfo_tips">填写以下信息领取奖励！</div>
            <div class="writeinfo_name" v-show="prizeInfo.prizeType==2">
              <input v-model="userWriteForm.name" type="text" placeholder="请输入您的姓名">
            </div>
            <div class="writeinfo_mobile">
              <input v-model="userWriteForm.mobile" type="text" placeholder="请输入您的手机号" @blur="blurInput" @focus="focusClick">
            </div>
            <div class="writeinfo_code">
              <div class="left">
                <input v-model="userWriteForm.code" type="text" placeholder="请输入验证码" @blur="blurInput" @focus="focusClick">
              </div>
              <div class="right">
                <div class="writeinfo_code_btn saclebtn" @click="clickCode" v-show="!showVcode">{{VerShowTxt}}</div>
                <div class="writeinfo_code_btn saclebtn" v-show="showVcode">{{counts}}s</div>
              </div>
            </div>
            <div class="writeinfo_btns">
              <div class="writeinfo_btns_ok saclebtn" @click="clickSubmit">确定</div>
              <div class="close" @click="close">关闭</div>
            </div>
          </div>
        </div>
    </div>
</template>
<script>
import request from "@/utils/request";
import {MessageBox} from "mint-ui";
import axios from "axios";
import utils from "@/utils/utils";
import wx from "weixin-js-sdk";
import * as config from "./config";
import Cookies from "js-cookie";
import Share from "@/components/common/Share";
import Bottom from "@/components/common/Bottom";
import Qs from "qs";
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      isFocus:false,
      current: 0,
       openid:Cookies.get("openid"),
      registeroid:  this.$route.query.registeroid
      ? this.$route.query.registeroid
      : '', //销售中介的openid
      awards: [
        // 奖品数组
        { id: 8, name: "六等奖" , src:'http://assets.rurushishi.com/activies/bgyAct/7.png'},
        { id: 5, name: "五等奖" , src:'http://assets.rurushishi.com/activies/bgyAct/5.png'},
        { id: 3, name: "三等奖" , src:'http://assets.rurushishi.com/activies/bgyAct/3.png'},
        { id: 6, name: "六等奖" , src:'http://assets.rurushishi.com/activies/bgyAct/6.png'},
        { id: 2, name: "二等奖" , src:'http://assets.rurushishi.com/activies/bgyAct/2.png'},
        { id: 4, name: "四等奖" , src:'http://assets.rurushishi.com/activies/bgyAct/4.png'},
        { id: 7, name: "六等奖" , src:'http://assets.rurushishi.com/activies/bgyAct/7.png'},
        { id: 1, name: "一等奖" , src:'http://assets.rurushishi.com/activies/bgyAct/1.1.png'}
      ],
      
      prizeInfo:{
        prizeType: 1,
        flag: false
      },
      userWriteForm:{
        name: '',
        mobile: '',
        code: ''
      },
      prizeId: 0,
      timer: null,
      VerShowTxt: '获取验证码',
      showVcode: false,
      counts: '',

      speed: 200, // 速度
      diff: 15, // 速度增加的值
      award: {}, // 抽中的奖品
      time: 0, // 记录开始抽奖时的时间
      prize: ''
    };
  },
  methods: {
    focusClick(e) {
                this.isFocus = true;
                if (utils.browser.versions.ios) {
                    setTimeout(function () {
                        e.target.scrollIntoView(true);
                    }, 100);
                }
            },
            blurInput(e) {
                this.isFocus = false;
                this.$nextTick(() => {
                    if (utils.browser.versions.ios && !this.isFocus) {
                        setTimeout(function () {
                            e.target.scrollIntoView(false);
                        }, 300);
                    }
                });
            },

     //返回首页
        ret(){
            // this.$router.push({path:"./index",query:{channel:this.channel,reOpenid:this.reOpenid}});
             window.location.href = location.protocol + '//' + location.host + '/act/bgyact/index?channel=' + this.channel + '&reOpenid=' + this.openid+'&registeroid='+this.registeroid;
        },

    clickSubmit(){
      let _self = this;
        if (!_self.userWriteForm.mobile) {
                    return MessageBox.alert("请输入手机号", "提示");
                } else {
                    if (!utils.isMobile(_self.userWriteForm.mobile)) {
                        return MessageBox.alert("请填写正确的手机号", "提示");
                    }
                }
                 if (!_self.userWriteForm.code) {
                    return MessageBox.alert("请输入验证码", "提示");
                }else{
                    _self.userWriteForm.code.substring(0,4) //截取前6位字符
                }
           let query = {
                         prizeId:_self.prizeId,
                          activityId: config.ACT_CODE,
                          mobile: _self.userWriteForm.mobile,
                          code: _self.userWriteForm.code,
                          openId:Cookies.get("openid")
                          // name: _self.userWriteForm.name
                        };
                        axios
                            .post(
                              `${_self.global.API_FORUM_URL}/api/lightenstar/luckyDrawPrize?${Qs.stringify(
                                query
                              )}`,
                              {}
                            )
                            .then(response => {
                              if(response.code==0){
                                return MessageBox.alert("领奖成功", "提示");
                              }
                            });

    },
    //获取手机验证码
            getActPhoneVCode(){
                const _self = this;
                if(!_self.userWriteForm.mobile){
                        return MessageBox.alert("请输入手机号", "提示");
                    }else{
                      let query = {
                          activityId: config.ACT_CODE,
                          mobile: _self.userWriteForm.mobile
                        };
                        axios
                            .post(
                              `${_self.global.API_FORUM_URL}/api/activity/getSmsCode?${Qs.stringify(
                                query
                              )}`,
                              {}
                            )
                            .then(response => {
                              console.info(response)
                              if(response.code==0){
                                //  _self.$router.push({path:"./main",query:{channel:_self.channel}});
                                //  window.location.href = location.protocol + '//' + location.host + '/act/bgyact/prize?channel=' + _self.channel + '&reOpenid=' + _self.openid+'&registeroid='+_self.registeroid;
                              }
                            });
                    };
            },

            clickCode(){
                const _self = this;
                const TIME_COUNT = 60;
                _self.getActPhoneVCode();
                if(!_self.timer&&_self.userWriteForm.mobile){
                    _self.counts = TIME_COUNT;
                    _self.showVcode = true;
                    _self.timer = setInterval(()=>{
                        if(_self.counts>0&&_self.counts<=TIME_COUNT){
                            _self.counts--;
                        }else{
                            _self.showVcode = false;
                            _self.VerShowTxt = '重新获取';
                            clearInterval(_self.timer);
                            _self.timer = null;
                        }
                    },1000)
                }
              
            },
            close() {
               this.prizeInfo.flag=false;
               window.location.href = location.protocol + '//' + location.host + '/act/bgyact/main?channel=' + this.channel + '&reOpenid=' + this.openid+'&registeroid='+this.registeroid;
                // _self.$router.push({path:"./main",query:{channel:_self.channel}});
            },

     start(){
            // 开始抽奖
            this.drawAward();
            this.time = Date.now();
            this.speed = 200;
            this.diff = 15;
        },
        drawAward(){
            // 请求接口, 这里我就模拟请求后的数据(请求时间为2s)
            setTimeout( () => {
              let _self = this;
              let query = {
                activityId: config.ACT_CODE,
                // channel: _self.channel,
                openId: Cookies.get("openid"),
                projectId: 51,
                type: 2,
                // lat: 1,
                // lng: 1,
              };
              axios
                .post(
                  `${_self.global.API_FORUM_URL}/api/lightenstar/luckyDraw?${Qs.stringify(
                    query
                  )}`,
                  {}
                )
                .then(response => {
                  console.info(response)
                  if(response.code==0){
                      _self.prizeId = response.prizeId;
                      _self.$nextTick(() => {
                        _self.award = {
                            id: response.key,
                            name: response.value,
                        };
                        _self.prize=response.prize
                        // _self.prize = response.prize;
                    });
                    _self.move();
                  }else{
                    alert('抽奖次数已用完')
                  }
                });
            }, 2000 );
            
        },
        move(){
            window.timeout = setTimeout( () => {
                this.current++;
                if ( this.current > 7 ) {
                    this.current = 0;
                }

                // 若抽中的奖品id存在，则开始减速转动
                if ( this.award.id && ( Date.now() - this.time ) / 1000 > 2 ) {
                    this.speed += this.diff;   // 转动减速

                    // 若转动时间超过4秒，并且奖品id等于小格子的奖品id，则停下来！
                    if ( ( Date.now() - this.time ) / 1000 > 4 && this.award.id == this.awards[ this.current ].id ) {
                        clearTimeout( window.timeout );
                        setTimeout( () => {
                            // alert( this.award.name );
                            this.prizeInfo.flag=true;
                        }, 0 );
                        return;
                    }

                // 若抽中的奖品不存在，则加速转动
                } else {
                    this.speed -= this.diff;   // 转动加速
                }

                this.move();
            }, this.speed );
        },

    ...mapMutations({
      setInfo: "SET_INFO",
      setChannel: "SET_CHANNEL"
    })
  },
  computed: {
    ...mapState(["info", "channel"])
  },
  mounted(){
        let _self = this;
           _self.global.SHARE_CALLBACK_OK = function (type) {
            //  let _self = this;
             let query = {
                activityId: config.ACT_CODE,
                // channel: 1,
                openId: Cookies.get("openid")
              };
                axios
                    .post(
                    `${_self.global.API_FORUM_URL}/api/activity/share?${Qs.stringify(
                      query
                    )}`,
                    {
                      
                    })
                    .then(response => {
                        if(response.code==0){
                          _self.isshare = false;
                        }
                         
                    });

            };
            config.initShare();
  }
};
</script>
<style lang="stylus" scoped>
.rotor {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: url('http://assets.rurushishi.com/activies/bgyAct/draw2.jpg') no-repeat; // assets.rurushishi.com/activies/bgyAct/draw1.jpg) no-repeat
  background-size: 100% 100%;
}

#rotary-table {
        width: 4.95rem;
        height: 4.95rem;
        border-radius .1rem
        border .2rem solid #fff
        position: relative;
        margin: auto;
        background-color: antiquewhite;
        .award {
            width: 1.65rem;
            height: 1.65rem
            text-align: center;
            float: left;
            position: absolute;
            overflow: hidden;
            background-color: aquamarine;
            &.active {
                border 1px solid red
                box-sizing border-box
            }
            &.award0 {
                top: 0;
                left: 0;
            }
            &.award1 {
                top: 0;
                left: 1.65rem;
            }
            &.award2 {
                top: 0;
                right: 0;
            }
            &.award3 {
                top: 1.65rem;
                right: 0;
            }
            &.award4 {
                bottom: 0rem;
                right: 1.65rem;
            }
            &.award5 {
                bottom: 0;
                right: 0;
            }
            &.award6 {
                bottom: 0;
                left: 0;
            }
            &.award7 {
                top: 1.65rem;
                left: 0;
            }
        }
        .award>img{
          width 1.65rem
          height 1.65rem
        }
        #start-btn {
            position: absolute;
            top: 1.65rem;
            left: 1.65rem;
            width: 1.65rem;
            height: 1.65rem;
            line-height: 1.65rem;
            text-align: center;
            background-color: coral;
        }
    }
.return{
    position absolute
    bottom: 1.2rem
    right 0
    width: .81rem
}
.return>img{
    width: 100%
    height: 100%
}
.writeinfo {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}


.writeinfo_warp {
  position: relative;
  width: 80%;
  background-color: blue;
  background: url('http://assets.rurushishi.com/activies/bgyAct/msg.png') repeat center center;
  background-size: 100% 100%;
  padding: 1.2rem 0;
}

.writeinfo_warp >div {
  margin-top: 0.3rem;
}

// .writeinfo_bg {
// position: absolute;
// }

// .writeinfo_bg img {
// width: 100%;
// }
.writeinfo_prizeinfo {
  margin-top: 0rem !important;
  width: 80%;
  margin 0 auto
  text-align: center;
  font-size: 0.28rem;
  color: #ffffff;
}

.writeinfo_tips {
  margin-top: 0.2rem;
  width: 100%;
  text-align: center;
  color: #ffffff;
}

.writeinfo_name {
  margin-top: 0.2rem;
  width: 100%;
  text-align: center;
}

.writeinfo_name input {
  border-radius: 0.3rem;
  width: 80%;
  height: 0.6rem;
  text-indent: 0.3rem;
  border-color: #eee1a9;
}

.writeinfo_mobile {
  margin-top: 0.2rem;
  width: 100%;
  text-align: center;
}

.writeinfo_mobile input {
  border-radius: 0.3rem;
  width: 80%;
  height: 0.6rem;
  text-indent: 0.3rem;
  border-color: #eee1a9;
}

.writeinfo_code {
  width: 80%;
  margin: 0.2rem auto 0 auto;
  display: flex;
}

.writeinfo_code input {
  border-radius: 0.3rem;
  width: 100%;
  height: 0.6rem;
  text-indent: 0.3rem;
  border-color: #eee1a9;
}

.writeinfo_code .writeinfo_code_btn {
  border-radius: 0.3rem;
  min-width: 1rem;
  height: 0.6rem;
  line-height: 0.6rem;
  text-align: center;
  margin-left: 10%;
  background-color: #ffb53b;
  padding: 0 0.1rem;
}

.writeinfo_btns {
  margin-top: 0.2rem;
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
}

.writeinfo_btns .writeinfo_btns_ok {
  width: 30%;
  margin-right 10%;
  height: 0.6rem;
  line-height: 0.6rem;
  background-color: #ffb53b;
  border-radius: 0.3rem;
}
.writeinfo_btns .close{
  width: 30%;
  height: 0.6rem;
  line-height: 0.6rem;
  background-color: #ffb53b;
  border-radius: 0.3rem;
}
</style>


